<template>
    <div id="box">
        <div class="container">
            <div class="evaluationCon">
                <div class="evaluationHead">
                    <div class="headLeft">
                        <span class="pingfen">{{avgScore}}</span>
                        <span>商家评分</span>
                    </div>
                    <div class="headRight">
                        共
                        <p class="number">{{evaluates.length}}</p>
                        条评价
                    </div>
                </div>
                <div class="evaluationItemContainer">
                    <div class="evaluationItemHead">
                        <div ref="good" @click="change('good',$event)">
                            好评
                        </div>
                        <div ref="middle" @click="change('middle',$event)">
                            中评
                        </div>
                        <div ref="bad" @click="change('bad',$event)">
                            差评
                        </div>
                    </div>
                    <div class="evaluationGroup">
                        <el-card class="evaluationItem" v-for="(item,i) in evaluates" :key="i">
                            <div class="avatar">
                                <el-image :fit="'scale-down'" style="width: 50px;border-radius: 50%;" :src="$url+item.userEntity.avatar">
                                    <div slot="placeholder" class="image-slot">
                                        加载中<span class="dot">...</span>
                                    </div>
                                </el-image>
                            </div>
                            <div class="comment">
                                <div class="commentHead">
                                    <span class="userName">{{item.userEntity.nick}}</span>
                                    <span class="date">{{item.publishTime}}</span>
                                </div>
                                <div class="commentPingFen">
                                    <span class="">评分</span>
                                    <span>
                                       <el-rate
                                               disabled
                                               v-model="item.evaluationScore"
                                               show-text>
                                      </el-rate>
                                   </span>
                                </div>
                                <div class="commentContent">
                                    <span class="text">{{item.evaluationContent}}</span>
<!--                                    <span class="img">-->
<!--                                       <img src="http://127.0.0.1:3000/static/img/avatar.jpg" alt="">-->
<!--                                       <img src="http://127.0.0.1:3000/static/img/avatar.jpg" alt="">-->
<!--                                       <img src="http://127.0.0.1:3000/static/img/avatar.jpg" alt="">-->
<!--                                   </span>-->
                                    <span class="order">
                                       <el-tag v-for="(goods,g) in item.orderDetailEntityList" style="margin: 2px 2px" :key="g" size="mini" type="danger">{{goods.goodsName}}</el-tag>
                                   </span>
                                </div>
                                <div class="reply" v-if="item.replyEntity!=null">
                                    <div class="replyContainer">
                                        <p class="replyTitle">商家回复：</p>
                                        <p class="replyContent">{{item.replyEntity.replyContent}}</p>
                                        <p class="relyDate" style="text-align: right;">{{item.replyEntity.replyTime}}</p>
                                    </div>
                                </div>


                            </div>
                        </el-card>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        created() {
            this.getEvaluate()
        },
        methods: {
            change(name, event) {
                this.activeName = name
                this.$refs.good.className = ''
                this.$refs.bad.className = ''
                this.$refs.middle.className = ''
                event.path[0].className = 'active'
            },
            getEvaluate() {
                let params = {
                    shopId: this.$route.params.shopId
                }
                this.$axios({
                    method: 'get', params, url: '/order/getEvaluate'
                }).then(r => {
                    if (r.data.err_code === 0) {
                        this.evaluates = r.data.result
                        this.getAvgScore()
                    } else {
                        this.$message('该店铺暂时没有用户评论')
                    }
                }).catch(err => {
                    console.log(err)
                    this.$message.error('网络异常')
                })
            },
            getAvgScore(){
                let count = 0
                this.evaluates.forEach(item=>{
                    // console.log(Number(item.evaluationScore))
                    count += parseFloat(item.evaluationScore)
                })
                let avgScore = (count/this.evaluates.length).toFixed(2)
                this.avgScore = avgScore
            }
        },
        data() {
            return {
                activeName: '',
                evaluates: '',
                avgScore:''
            }
        },

    }
</script>
<style lang='less' scoped>
    .avatar img {
        width: 50px;
        border-radius: 50%;
    }

    .active {
        background: #FEC442 !important;
        color: black !important;
        transition: all .3s !important;
    }

    #box {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        background-color: whitesmoke;
    }

    .evaluationItemContainer {
        display: flex;
        flex-direction: column;
    }

    .container {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        background-color: white;
    }

    .evaluationCon {
        width: 95%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .evaluationHead {
        width: 100%;
        background-color: white;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        margin-bottom: 10px;
    }

    .headLeft {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .headLeft .pingfen {
        color: #FDAF1C;
        font-size: 40px;
        font-weight: 800;
    }

    .headRight {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        align-self: flex-end;
    }

    .number {
        font-size: 40px;
    }

    .evaluationItem {
        background-color: white;
        display: flex;
        flex-direction: row;
        margin-bottom: 10px;
        border-bottom: 1px solid #F9F9F8;
    }
    /deep/.el-card__body{
        width: 100%;
    }

    .evaluationItemHead {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .evaluationItemHead div {
        flex: 1;
        display: flex;
        justify-content: center;
        align-content: center;
        padding: 10px 20px;
        background: white;
        color: #FEC442;
        border: 1px solid #FEC442;
    }

    .evaluationGroup {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: 10px;
    }

    .comment {
        display: flex;
        flex-direction: column;
        margin-top: 10px;
        flex: 2;
    }

    .commentHead {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .date {
            align-self: flex-end;
            font-size: 10px;
            color: #9B9B9B;
        }
    }

    .commentPingFen {
        margin: 5px 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        color: #C3C3C3;
        font-size: 10px;

        i {
            margin: 0 -2px;
            color: #FCD260;
            font-size: 15px;
        }

        span {
            padding-right: 10px;
        }
    }

    .commentContent {
        display: flex;
        flex-direction: column;

        .img {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-bottom: 5px;
        }

        .text {
            margin-bottom: 5px;
        }

        .order {
            font-size: 10px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            color: #6A6A6A;

            span {
                padding: 0 5px;
                margin: 3px 0;
                border: 1px solid #D6D6D6;
            }
        }
    }

    .commentContent img {
        width: 95px;
    }

    .reply {
        margin-top: 5px;
        font-size: 10px;
        display: flex;
        background: #F9F9F8;
        justify-content: center;
        padding: 5px 0;
        flex-direction: column;
        align-items: center;

        .replyContainer {
            width: 95%;
            line-height: 20px;

            .replyTitle {
                color: #656565;
            }

            .replyContent {
                color: #9C9C9C;
                margin-right: auto;
            }
        }


    }
</style>